<template>
  <view class='navbar' :style="[customStyle]">
    <image class="back" src="@/static/common/nav_bar_left_boder_img.png" v-if="isShowBack" @click="handleBack">
    </image>
    <text class="title">{{title}}</text>
    <slot name="ringtBtn"></slot>
  </view>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        required: true,
        default: ''
      },
      isShowTitle: {
        type: Boolean,
        required: false,
        default: true
      },
      isShowBack: {
        type: Boolean,
        required: false,
        default: true
      },
      customStyle: {
        type: Object,
        required: false,
        default: null
      }
    },
    methods: {
      handleBack() {
        const pages = getCurrentPages()
		if(pages.length>0) {
			uni.navigateBack({
				delta: 1
			})
		} else {
			uni.redirectTo({
				url: '/pages/index/index'
			})
		}
      }
    }
  }
</script>

<style scoped lang="scss">
  .navbar {
    width: 100%;
    height: 56upx;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    .back {
      width: 56upx;
      height: 56upx;

      position: absolute;
      left: 32upx;
      top: 50%;
      transform: translateY(-50%);
    }

    .title {
      color: #fff;
      font-family: "PingFang SC";
      font-size: 36upx;
      font-style: normal;
      font-weight: 500;
      line-height: 56upx;
    }
  }
</style>